<template>
	<view class="content">
		<Header :deviceInfo="deviceInfo" @openPath="openPath" />
		<NoMap
			:deviceInfo="deviceInfo"
			:uniShowList="uniShowList"
			v-if="!hasDefaultMap || !deviceMapList.length" />
		<view v-else>
			<view class="map">
				<Map :showPath="showPath" type="index" v-if="isShowMap" />
			</view>
			<statusCard :device_sn="device_sn" />
			<bottomControl
				ref="bottomRef"
				type="device"
				:device_sn="device_sn" />
		</view>
	</view>
</template>

<script setup lang="ts">
import {
	getCurrentInstance,
	ref,
	computed,
	reactive,
	onMounted,
	watch,
} from "vue";
import statusCard from "./components/statusCard.vue";
// import { onBeforeRouteLeave } from "vue-router";
import { getBoundVcus } from "@/service/index";
import NoMap from "./components/noMap.vue";
import Map from "@/components/Map/index.vue";
import Header from "./components/header.vue";
import bottomControl from "./components/bottomControl.vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
import { useDevice } from "@/utils/device";
import { useDeviceStore } from "@/stores/device";
import { useDeviceInfo } from "@/utils/getDeviceInfo";
const { hasDefaultMap, getDeviceMaps } = useDevice();
const { deviceStatus, clearTime, getDeviceShadow } = useDeviceInfo();
const deviceStore = useDeviceStore();
const { locale, t } = useI18n();
const instance: any = getCurrentInstance();
const tokenStore = useUniversalStorage("token", "");
const defaultDevice = useUniversalStorage("DefaultDevice", {});
const deviceInfo = ref<Device | null>(null);
const deviceMapList = ref<DeviceMap[]>([]);
const device_sn = ref("");
const showPath = ref(true);
const isShowMap = ref(true);
// 初始化列表
const uniShowList = ref<UniShowItem[]>([
	{ value: "", name: t("device.name") },
	{ value: "", name: t("device.desc") },
	{ value: "", name: t("device.sn") },
	{ value: "", name: t("device.firmwareVersion") },
]);
const bottomRef = ref<InstanceType<typeof bottomControl>>;

const openPath = (val: boolean) => {
	showPath.value = val;
};
const getMenu = () => {};
//获取设备信息
const getInfoList = async (deviceSn: string) => {
	try {
		const { data } = await getBoundVcus({ keywords: deviceSn });

		if (data?.code === 0 && data.data?.devices?.length) {
			const currentDevice = data.data.devices[0];
			// 存储到本地和状态
			defaultDevice.value = currentDevice;
			deviceInfo.value = currentDevice;
			// 根据型号设置布局参数
			bottomRef.value?.setBottom();
			const fields = [
				"name",
				"desc",
				"device_sn",
				"firmware_version",
			] as const;
			uniShowList.value = uniShowList.value.map((item, index) => ({
				...item,
				value: currentDevice[fields[index]] || "",
			}));
		}
	} catch (error) {
		console.error("获取设备信息失败:", error);
		uni.showToast({
			title: "获取设备信息失败",
			icon: "none",
		});
	}
};
// 获取当前页面参数
const getCurrentPageOptions = (): Record<string, any> => {
	const pages = getCurrentPages();
	if (pages.length === 0) {
		console.log("页面栈为空");
		return {};
	}

	const currentPage: any = pages[pages.length - 1];
	let params: Record<string, any> = {};
	// #ifdef APP-PLUS
	if (currentPage.$page && currentPage.$page.options) {
		params = currentPage.$page.options;
	}
	// #endif
	// #ifdef H5
	if (currentPage.$route && currentPage.$route.query) {
		params = currentPage.$route.query;
	}
	// #endif
	return params;
};
onShow(async () => {
	const options = getCurrentPageOptions();
	if (options?.device_sn) {
		device_sn.value = options.device_sn;
		getInfoList(device_sn.value);
		await getDeviceMaps(device_sn.value, "index");
		deviceMapList.value = deviceStore.deviceMapList;
		await getDeviceShadow(device_sn.value);
		isShowMap.value = true;
	}
});

onHide(() => {
	clearTime();
	isShowMap.value = false;
	bottomRef.value?.cleanupListeners();
});
onMounted(() => {
	bottomRef.value?.setupListeners();
});
</script>

<style lang="scss" scoped>
.content {
	background-color: #fff;
	height: 100vh;
}
.map {
	height: 100vh;
	background-color: #cdcdcd;
}
</style>
